<template>
  <div class="index-container">
    <div class="header">
      <div>
        <div class="left">
          <router-link to="/checkCity">武汉
          <i></i>
          </router-link>
        </div>
      </div>
      <!-- <h4>大件会</h4> -->
      <div class="logo">
        <a href="javascript:;">
          <img src="../assets/images/index/logo@2x.png" alt="">
        </a>
      </div>
      <div class="right">
        <router-link to="/vip">
          <span class="hd-icon"></span>
        </router-link>
      </div>
    </div>
    <div class="banner">
      <!-- <a href="javascript:;">
        <img src="../assets/images/index/banner@2x.jpg" alt="">
      </a> -->
      <mt-swipe :auto="4000">
        <mt-swipe-item v-for="(item, index) in bannerList" :key="item.bannerId">
            <img :src="item.mImage" alt="" />
        </mt-swipe-item>
      </mt-swipe>
    </div>
    <div class="meau">
      <ul class="clearfix item">
        <li>
          <a href="javascrip:;">
            <i class="myNeedIcon"></i>
            <span>我的需求</span>
          </a>
        </li>
        <li>
          <a href="javascrip:;">
            <i class="ppicon"></i>
            <span>品牌征集</span>
          </a>
        </li>
        <li>
          <a href="javascrip:;">
            <i class="zcicon"></i>
            <span>线上直采</span>
          </a>
        </li>
        <li>
          <a href="javascrip:;">
            <i class="consColleage"></i>
            <span>消费学院</span>
          </a>
        </li>
        <li>
          <a href="javascrip:;">
            <i class="jsicon"></i>
            <span>装修预算</span>
          </a>
        </li>
      </ul>
      <div class="saveMoney">
        <img src="../assets/images/index/leijijiesheng@2x.png" alt="">
        <!-- <img src="../assets/images/index/" alt=""> -->
        <div class="text">
          <span>
            已帮会员累计节省
          </span>
          <span>
            <i>20000000</i>元</span>
        </div>
      </div>
      <div class="aim">
        <a href="javascrip:;">
          <span class="aimicon"></span>
        </a>
        <!-- <span>消费者的弱势地位</span> -->
        <div id="box" class="wfl">
          <ul id="con1" ref="con1" :class="{anim:animate==true}">
            <li v-for='(item,index) in saidList' :key="index">
              <a :href="item.description">
                {{item.label}}
              </a>
            </li>
          </ul>
        </div>
        <i></i>
      </div>
    </div>
    <div class="hdlist">
      <h4>- 业主采购团 -</h4>
      <ul>
        <li v-for="(item,index) in gpList" :key="index">
          <a href="javacscript:;">
            <img :src="item.mBanner" alt="">
            <span class="circle" v-if="index === (gpList.length-1)">已结束</span>
          </a>
          <p v-text="item.description"></p>
        </li>
      </ul>
    </div>
    <div class="footer">
      <p>- 我也是有底线的 -</p>
    </div>
  </div>
</template>
<script>
import { fetch } from "../api/index";
import { Toast, InfiniteScroll } from "mint-ui";
export default {
  data() {
    return {
      animate: false,
      bannerList: [],
      gpList: [],
      saidList: [],
      iscircle: false
    };
  },
  created() {
    this.timer = setInterval(this.scroll, 2000); // 在钩子函数中调用我在method 里面写的scroll()方法，注意此处不要忘记加this,我在这个位置掉了好几次坑，都是因为忘记写this。
    this.bannerImages();
  },
  beforeDestroy() {
    clearInterval(this.timer); //设定时器及时清除
  },
  methods: {
    scroll() {
      let con1 = this.$refs.con1;
      con1.style.marginTop = "-15px";
      this.animate = !this.animate;
      var that = this; // 在异步函数中会出现this的偏移问题，此处一定要先保存好this的指向
      setTimeout(function() {
        that.saidList.push(that.saidList[0]);
        that.saidList.shift();
        con1.style.marginTop = "0px";
        that.animate = !that.animate; // 这个地方如果不把animate 取反会出现消息回滚的现象，此时把ul 元素的过渡属性取消掉就可以完美实现无缝滚动的效果了
      }, 1000);
    },
    async bannerImages(areaId) {
      let data = {
        areaId: 9
      };
      let res = await fetch("/api/index", data);
      console.log(res);
      if (res.code === 200) {
        this.bannerList = res.obj.bannerList;
        this.gpList = res.obj.gpList;
        // if(this.gpList[res.obj.gpList.length-1]) {
        //   this.iscircle = true
        // }
        this.saidList = res.obj.saidList;
      } else {
        Toast({
          message: res.msg,
          position: "middle",
          duration: 3000
        });
      }
    }
  }
}
</script>
<style lang="less" scoped>
.header {
  .logo {
    a {
      display: inline-block;
      width: 131/37.5rem;
      height: 42/37.5rem;
      margin-top: 18/37.5rem;
    }
  }
  .left {
    position: absolute;
    left: 32/37.5rem;
    top: 35/37.5rem;
    height: 32/37.5rem;
    line-height: 32/37.5rem;
    a {
      font-size: 32/40rem;
    }
    i {
      /* display: inline-block;
        width: 0.4rem;
        height: 0.4rem;
        border-bottom: 1px solid #666;
        border-right: 1px solid #666;
        content: "";
        -webkit-transform: rotate(45deg);
        vertical-align: 0.15rem;
        color: #888; */
      display: inline-block;
      width: 22/37.5rem;
      height: 22/37.5rem;
      background: url(../assets/images/index/xiala@2x.png) no-repeat;
      background-size: contain;
      position: absolute;
      top: 12/37.5rem;
      left: 70/37.5rem;
    }
  }
  .right {
    position: absolute;
    right: 0.5rem;
    top: 0.75rem;
    height: 36/37.5rem;
    line-height: 36/37.5rem;
    .hd-icon {
      right: 0.5rem;
      width: 1.1rem;
      height: 1rem;
      background-position: 0 0;
      background: url(../assets/images/index/gerenzhongxin@2x.png) no-repeat;
      background-size: 100% 100%;
      display: inline-block;
    }
  }
}
.meau {
  margin-top: 40/37.5rem;
  .item {
    li {
      float: left;
      width: 20%;
      text-align: center;
      i {
        display: inline-block;
        width: 64/37.5rem;
        height: 68/37.5rem;
      }
      span {
        color: #555;
        margin-top: 14/37.5rem;
      }
      .myNeedIcon {
        background: url(../assets/images/index/xuqiuzhengji@2x.png);
        background-size: 100% 100%;
      }
      .ppicon {
        background: url(../assets/images/index/pinpaizhengji@2x.png);
        background-size: 100% 100%;
      }
      .zcicon {
        background: url(../assets/images/index/xianshangzhicai@2x.png);
        background-size: 100% 100%;
      }
      .consColleage {
        background: url(../assets/images/index/xiaofeixueyuan@2x.png);
        background-size: 100% 100%;
      }
      .jsicon {
        background: url(../assets/images/index/zhuangxiujisuanqi@2x.png);
        background-size: 100% 100%;
      }
      span {
        display: block;
        font-size: 21/37.5rem;
      }
    }
  }
  .saveMoney {
    margin-top: 28/37.5rem;
    position: relative;
    .text {
      position: absolute;
      top: 50/37.5rem;
      left: 56/37.5rem;
    }
    span:nth-of-type(1) {
      display: inline-block;
      width: 122/37.5rem;
      font-size: 26/37.5rem;
      color: #fff;
    }
    span:nth-of-type(2) {
      position: absolute;
      top: 6/37.5rem;
      left: 280/37.5rem;
    }
  }
  .aim {
    text-align: left;
    padding: 0 32/37.5rem;
    height: 50/37.5rem;
    line-height: 50/37.5rem;
    margin-top: 28/37.5rem;
    position: relative;
    .aimicon {
      display: inline-block;
      width: 105/37.5rem;
      height: 23/37.5rem;
      background: url(../assets/images/index/chuangshirenshuo@2x.png) no-repeat;
      background-size: 100% 100%;
      margin-right: 36/37.5rem;
    }
    span {
      font-size: 24/37.5rem;
      color: #555;
    }
    i {
      display: inline-block;
      width: 22/37.5rem;
      height: 22/37.5rem;
      background: url(../assets/images/index/gengduo@2x.png) no-repeat;
      background-size: contain;
      position: absolute;
      top: 14/37.5rem;
      right: 36/37.5rem;
    }
  }

  .anim {
    transition: all 1s;
  }
  #box {
    display: inline-block;
    height: 15px;
    line-height: 15px;
    overflow: hidden;
    transition: all 1s;
    font-size: 24/37.5rem;
    color: #555;
    width: 50%;
    .anim {
      transition: all 1s;
    }
    li {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
}

.hdlist {
  margin-top: 56/37.5rem;
  padding: 0 32/37.5rem;

  h4 {
    margin-bottom: 23/37.5rem;
    font-size: 32/37.5rem;
    font-weight: 400;
    color: #27272b;
  }
  p {
    font-size: 32/37.5rem;
    line-height: 92/37.5rem;
    color: #333;
  }
  a {
    display: inline-block;
    width: 100%;
    position: relative;
    img {
      display: inline-block;
      width: 100%;
      height: 100%;
    }
  }
}
.circle {
  width: 160/37.5rem;
  height: 160/37.5rem;
  line-height: 160/37.5rem;
  font-size: 30/37.5rem;
  color: #fff;
  background-color: rgba(39, 39, 43, 0.6);
  border-radius: 50%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%)
}
.footer {
  padding: 29/37.5rem;
  font-size: 22/37.5rem;
}
</style>
<style lang="less">

</style>